<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../content/UserPayCss.css"/>
		<link rel="stylesheet" type="text/css" href="../content/UserPayPassive.css"/>
	</head>
	<body>
		
		<div id="View_User_Pay_Main">
			
			<div class="PayPassiveCount">
				<span>粉丝数:{{PayList.length}}</span>
			</div>
			
			<ul>

				<li class="PayUser_Li" v-for="item in PayList">
					<div class="PayAvatar" :style="'background-image: url(' + item.avatar"></div>
					<div class="PayInfo">
						<div class="PayName">
							<span>{{item.niceName}}</span>
							<span><sup>{{item.time}}</sup></span>
						</div>
						<div class="PayBePay">
							<span>关注数 : {{item.payPassiveCount}}</span>
							<span>粉丝数 : {{item.payCount}}</span>
						</div>
					</div>
					<div class="isMutualBut" v-if="item.isMutual" @click="CancelPay(item.userId,$event)">
						互相关注
					</div>
				</li>

			</ul>
			<div class="returnUser">
				<a href="UserArticle.html">返回个人页</a>
			</div>
		</div>

		<script src="../javaScript/vue.js"></script>
		<script src="../javaScript/jquery-3.5.1.min.js"></script>
		<script>
			var View_UserPay_Main_Vue = new Vue({
				el: "#View_User_Pay_Main",
				data: {
					PayList: []
				},
				methods: {
					//取消关注
					CancelPay(uid, e) {
						var thidVue = e.target;
						$.get("https://localhost:44356/api/UserDetails/PayCheck", {
							Token: localStorage.getItem("ArticleUserId"),
							CurUid: uid
						}, function(data) {
							console.log(data);
							if (data.statusCode == 0) {
								if (!data.result) {
									$(thidVue).parent().animate({
										height: 0,
										opacity: 0
									}, 500)
								}
							}
						})

					}
				}
			});
			$(function() {
				var thisVue = View_UserPay_Main_Vue.$data;
				//获取用户关注列表
				var token = localStorage.getItem("ArticleUserId");
				if (token == null) {
					location = "./LogIn.html";
					return;
				}
				$.get("https://localhost:44356/api/UserDetails/UserPayPassive", {
					Token: token
				}, function(data) {
					console.log(data);
					if (data.statusCode == 1)
						location = "./LogIn.html";
					if (data.statusCode == 0) {
						thisVue.PayList = data.result;
					}
				})

			})
		</script>
	</body>
</html>
